<script lang="ts" setup>
const List = ['个人中心', '浏览记录', '我的收藏']
const currentTab = ref('个人中心')  // 默认选中的tab

// 通过 props 接收传递的 tab 参数
const props = defineProps({
  tab: String,
})

const selectItem = (item: string) => {
  currentTab.value = item  // 更新当前tab
  console.log(currentTab.value)
}

//获取课程数据
import Courses from '@/assets/json/courses.json';
const courses = ref(Courses.data)
// 截取前四个课程
const fourCourses = courses.value.slice(4, 8)


// 根据路由中的tab参数设置当前tab
onMounted(() => {
  if (props.tab) {
    currentTab.value = props.tab as string  // 获取路由中的tab参数并赋值
  }
})
</script>

<template>
  <div class="my">
    <ul class="my-list">
      <li :class="item === currentTab ? 'active' : ''" v-for="item in List" :key="item" @click="selectItem(item)">
        {{ item }}
      </li>
    </ul>

    <div v-if="currentTab === '个人中心'" class="my-content">
      <educ-form />
    </div>
    <div v-else-if="currentTab === '浏览记录'" class="my-content">
      <div class="educ-collect">
        <template v-for="item in courses" :key="item.id">
          <educ-collect :value="item" />
        </template>
      </div>
    </div>
    <div v-else-if="currentTab === '我的收藏'" class="my-content">
      <div class="educ-collect">
        <template v-for="item in fourCourses" :key="item.id">
          <educ-collect :value="item" />
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.my {
  height: 100%;
  padding: 1.25rem 0;
  background-color: #f7f7f7;

  &-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    max-width: 80%;
    height: 5rem;
    padding: 0.625rem;
    margin: 0 auto;
    font-size: 1.25rem;
    list-style-type: none;
    background-color: #fff;
    border-radius: 3.125rem;

    li {
      cursor: pointer;
    }
  }

  &-content {
    width: 90%;
    height: auto;
    min-height: 50rem;
    padding: 2.5rem;
    margin: 2.5rem auto;
    background-color: #fff;
    border-radius: 1.875rem;

    .educ-collect {
      display: flex;
      flex-wrap: wrap;
    }

    .educ-collect>* {
      box-sizing: border-box; // 包含 padding 和 border
      flex: 1 0 calc(25%); // 每行展示4个，计算间距后宽度
      max-width: calc(25%);
    }
  }
}

.active {
  color: $educ-font-color-primary;
  transition: all 0.3s ease;
}

.avatar-adaptive {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

@media screen and (width <=48rem) {
  .my-list {
    max-width: 90%;
    background-color: #f7f7f7;

    li {
      font-size: 1rem;
    }
  }
}
</style>
